<template>
	<div class="hostChart">
		<div v-loading="loading" id="chartId3" style="width: 100%;height: 500px" />
	</div>
</template>

<script>
  import {hostStack} from "@/api/statistic";

  export default {
    name: "hostChart",
    props: ['virusSpecies'],
    data() {
      return {
        species: [],
				list: [],
				chart: null,
        loading: false,
			}
    },
    watch: {
      virusSpecies: {
        handler(newVal, oldVal) {
          this.getHostStack()
        },
        immediate: true
      }
    },
    mounted() {
      this.initChart()
			this.getHostStack()
    },
    methods: {
      initChart() {
        this.chart = this.$echarts.init(document.getElementById('chartId3'))
      },

      async getHostStack() {
        this.loading = true
        const res = await hostStack({virusSpecies: this.virusSpecies === 'All the virus' ? null : this.virusSpecies})
				this.dealData(res.data)
        this.loading = false
      },
			dealData(data) {
        let series = []

				let xAixs = []
				let mArr = []
        let lArr = []
        let cArr = []
        let sArr = []

				data.map(n => {
          xAixs.push(n.host)
          mArr.push(n.mnum)
          lArr.push(n.lnum)
          cArr.push(n.cnum)
          sArr.push(n.snum)
				})

        // series.push(this.getStackBar("mRNA", mArr));
        series.push(this.getStackBar("lncRNA", lArr));
        // series.push(this.getStackBar("circRNA", cArr));
        // series.push(this.getStackBar("sRNA", sArr));

        let zoomShow = xAixs.length > 5;

        let option = {
          grid:{
            bottom:"150", //
						top: "110"
          },
          dataZoom: {
            show: zoomShow,
            type: 'slider',
            realtime: true,
            startValue: 0,
            endValue: 10,
            xAxisIndex: [0],
            bottom: '30',
            left: '30',
            height: 30,
            borderColor: 'rgba(0,0,0,0)',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {
            top: 50
					},
          title: {
            // text: 'Numbers of Virus species in ' + this.virusSpecies,
            text: 'Numbers of lncRNA in different hosts',
            left: 'center'
          },
          xAxis: {
            name: 'Host',
            type: 'category',
            nameLocation:"middle",
            nameGap: 130,
            data: xAixs,
            axisLabel : {//坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: -30,  //设置倾斜度
              formatter : function(params){
                var newParamsName = "";// 最终拼接成的字符串
                var paramsNameNumber = params.length;// 实际标签的个数
                var provideNumber = 20;// 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                rowNumber = rowNumber > 2 ? 2 : rowNumber;
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";// 表示每一次截取的字符串
                    var start = p * provideNumber;// 开始截取的位置
                    var end = start + provideNumber;// 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      // tempStr = params.substring(start, paramsNameNumber);
                      if (paramsNameNumber - start > 3) {
                        tempStr = params.substring(start, start + provideNumber - 3) + '...';
                      }else {
                        tempStr = params.substring(start, paramsNameNumber);
                      }
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;// 最终拼成的字符串
                  }

                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName
              }
            }
          },
          yAxis: {
          },
          series: series
        };
        this.chart.setOption(option)
			},
			getStackBar(rnaType, data) {
        let emphasisStyle = {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.3)'
          }
        };
        let bar = {
          name: rnaType,
          type: 'bar',
          stack: 'one',
          emphasis: emphasisStyle,
          data: data
        }
        return bar
			},
    }
  }
</script>

<style lang="stylus" scoped>

	.hostChart {

	}
</style>
